<template>
	<div class="box cards" @mouseenter="closeShow = true" @mouseleave="closeShow = false">
		<transition name="el-fade-in-linear">
			<close-one
				class="close"
				theme="filled"
				size="28"
				fill="#ffffff60"
				v-show="closeShow"
				@click="globalStore.homeView.boxOpenState = false"
			/>
		</transition>
		<div class="content">
			<TimeCapsule />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TimeCapsule from "./components/TimeCapsule/index.vue";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();

let closeShow = ref(false);
</script>

<style lang="scss" scoped>
.box {
	position: relative;
	flex: 1 0 0%;
	height: 80%;
	margin-left: 0.75rem;
	animation: fade 0.5s;
	animation: fade;
	&:hover {
		transform: scale(1);
	}
	.close,
	.setting {
		position: absolute;
		top: 14px;
		right: 14px;
		width: 28px;
		height: 28px;
		&:hover {
			transform: scale(1.2);
		}
		&:active {
			transform: scale(1);
		}
	}
	.setting {
		right: 56px;
	}
	.content {
		width: 100%;
		height: 100%;
		padding: 30px;
	}
}
</style>
